<template>
	<div class="scenes">
		<div class="scenes-box">
			<div class="scenes-box__title">场景列表</div>
			<div class="scenes-box__list">
				<div
					class="scenes-box__list-li"
					:class="tabIndex == item.path ? 'active' : ''"
					v-for="(item, index) in redList"
					:key="index"
					@click="changeTab(item.path)"
				>
					<router-link :to="item.path">{{ item.label }}</router-link>
				</div>
			</div>
		</div>
		<div class="scenes-form">
			<router-view />
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			redList: [
				{
					label: '签到统计',
					value: 1,
					path: '/integralMall/redStatistics'
				},
				{
					label: '金币任务',
					value: 2,
					path: '/integralMall/goldTask'
				},
				{
					label: '活动统计',
					value: 3,
					path: '/integralMall/activityStatistics'
				},
				{
					label: '金币兑换统计',
					value: 4,
					path: '/integralMall/goldExchangeStatistice'
				},
				{
					label: '兑换礼品统计',
					value: 5,
					path: '/integralMall/giftExchangeSetting'
				}
			],
			tabIndex: '/integralMall/redStatistics'
		};
	},

	mounted() {
		console.log(this.$route.path);
		this.tabIndex = this.$route.path;
	},

	methods: {
		changeTab(i) {
			this.tabIndex = i;
		}
	}
};
</script>
<style lang="scss" scoped>
.scenes {
	display: flex;
}
.scenes-box {
	height: 100%;
	width: 200px;
	background-color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
	transition: width 0.3s;
	margin-right: 10px;
	&__title {
		font-size: 15px;
		color: #f14d27;
		padding: 10px;
	}
	&__list {
		&-li {
			padding-left: 18px;
			height: 36px;
			font-size: 14px;
			cursor: pointer;
			line-height: 36px;
			a {
				color: #606266;
				display: block;
			}
			&.active {
				background: #f0f7ff;
			}
		}
		&-li:hover {
			background: #f5f7fa;
		}
	}
}
.scenes-form {
	width: calc(100% - 210px);
	height: 100%;
	background: #fff;
}
</style>
